<template>
	<view>
		<view v-if="orders_id">
			<view style="padding: 30rpx;" v-if="object==2">
				<view>出车验车图片</view>
				<view style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20rpx;margin-top: 20rpx;">

					<view
						v-for=" (item,idx) in list.filter(item=>item.validate_item_pic!=null&&item.validate_item_id<10)"
						style="border: #f8f8f8 solid 1px;">
						<u-image width="100%" height="206rpx" :src="host+item.validate_item_pic"
							@click="showImg(list.filter(item=>item.validate_item_pic!=null).map(item=>host+item.validate_item_pic),idx)"
							style="border-radius: 50rpx;" border-radius="10"></u-image>
					</view>
				</view>
				<view>出车验车视频</view>
				<view style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20rpx;margin-top: 20rpx;">
					<view style="width: 200rpx;height: 200rpx;margin: 5px;border-radius: 10rpx;"
						v-for="item in list.filter(item=>item.validate_item_id==10)">
						<video :src="host+item.validate_item_pic"
							style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" :controls="true"
							:show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="true"
							:enable-progress-gesture="false" object-fit="fill"></video>
					</view>
				</view>
			</view>
			<!-- 验车 -->
			<view style="padding: 0 30rpx;background-color: white;">
				<u-form :model="form" ref="uForm" label-width="auto" label-position="top">
					<u-form-item label="仪表里程"><u-input v-model="value" type="number" /></u-form-item>
					<u-form-item label="验车图片">
						<u-upload ref="uUpload" :auto-upload="false" :show-progress="true"
							@on-list-change="onPictureChange" :index="9" :max-count="99"
							:form-data="{path:'/static/img/validate_item_pic/'}" :multiple="true">
						</u-upload>
					</u-form-item>
					<!-- <view style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 20rpx" v-if="show">
						<view v-for="(item,idx) in form.list"
							style="background-color: white;display: flex;justify-content: center;text-align: center;">
							<u-form-item :label="item.validate_item_name">
								<u-upload :ref="uUpload+idx" :auto-upload="false" :show-progress="true"
									:index="item.validate_item_id" @on-list-change="onListChange" :max-count="1"
									:multiple="false">
								</u-upload>
							</u-form-item>
						</view>
					</view> -->
					<u-form-item label="验车视频">
						<view style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20rpx;">
							<view style="width: 200rpx;height: 200rpx;margin: 5px;border-radius: 10rpx;"
								v-for="item in form.list.filter(item=>item.validate_item_id==10)">
								<video :src="host+item.validate_item_pic"
									style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" :controls="true"
									:show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="true"
									:enable-progress-gesture="false" object-fit="fill"></video>
							</view>
							<view
								style="width: 200rpx;height: 200rpx;background-color: #f4f5f6;margin: 5px;border-radius: 10rpx;"
								@click="chooseVideo">
								<view
									style="#606266;font-size: 26rpx;flex-direction: column;display: flex;justify-content: center;align-items: center;height: 100%;">
									<u-icon name="plus" color="#606266" size="38"></u-icon>
									<text style="color: #606266;">选择视频</text>
								</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="有无车损">
						<u-radio-group v-model="validate_result.validate_result">
							<u-radio v-for="(item, index) in [{value:1,name:'无损坏'},{value:2,name:'有损坏'}]" :key="index"
								:name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item>
						<u-input v-model="validate_result.validate_result_desc" type="textarea" />
					</u-form-item>
					<u-form-item label="是否需要维修">
						<u-radio-group v-model="car_need_repair.car_need_repair">
							<u-radio v-for="(item, index) in [{value:1,name:'无需维修'},{value:2,name:'需要维修'}]" :key="index"
								:name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item>
						<u-input v-model="car_need_repair.validate_result_desc" type="textarea" />
					</u-form-item>
					<u-form-item>
						<u-button @click="submit" type="primary">确定验车</u-button>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cos from '../../utils/cos';
	export default {
		data() {
			return {
				host: 'https://cos2.ksmeilv.com',
				object: 1,
				show: false,
				orders_id: null,
				value: '',
				list: [],
				validate_result: {
					validate_item_name: '有无车损',
					validate_item_id: 11,
					validate_result: 1,
					validate_result_desc: ''
				},
				car_need_repair: {
					validate_item_name: '是否需要维修',
					validate_item_id: 13,
					car_need_repair: 1,
					validate_result_desc: ''
				},
				form: {
					list: [{
						validate_item_name: '车牌号',
						validate_item_id: 1,
						validate_item_pic: '',
						validate_result: 1
					}, {
						validate_item_name: '右前方',
						validate_item_id: 2,
						validate_item_pic: '',
						validate_result: 1
					}, {
						validate_item_name: '左前方',
						validate_item_id: 3,
						validate_item_pic: '',
						validate_result: 1
					}, {
						validate_item_name: '左后方',
						validate_item_id: 4,
						validate_item_pic: '',
						validate_result: 1
					}, {
						validate_item_name: '又后方',
						validate_item_id: 5,
						validate_item_pic: '',
						validate_result: 1
					}, {
						validate_item_name: '前排内饰',
						validate_item_id: 6,
						validate_item_pic: '',
						validate_result: 1
					}, {
						validate_item_name: '后排内饰',
						validate_item_id: 7,
						validate_item_pic: '',
						validate_result: 1
					}, {
						validate_item_name: '公里表',
						validate_item_id: 8,
						validate_item_pic: '',
						validate_result: 1,
						validate_value: ''
					}],
				}
			}
		},
		onLoad(options) {
			console.log(options);
			if (options.list) {
				var list = JSON.parse(options.list);
				this.list = list;
			}
			if (options.orders_id) {
				this.orders_id = options.orders_id;
				var object = options.object;
				this.object = object;

				this.form.list.map((item) => item.validate_object = object);
				uni.setNavigationBarTitle({
					title: object == 1 ? '出车验车' : '还车验车'
				});
			} else {
				uni.showToast({
					title: '参数错误'
				})
			}
			if (options.object) {
				var object = options.object;
				this.form.list.map((item) => item.validate_object = object);
				uni.setNavigationBarTitle({
					title: object == 1 ? '出车验车' : '还车验车'
				});
			} else {
				uni.showToast({
					title: '参数错误'
				})
			}
		},
		mounted() {

		},
		methods: {
			chooseVideo() {

				var that = this;
				uni.chooseVideo({
					success(res) {
						var list = [{
							file: {
								path: res.tempFilePath,
								size: res.size
							}
						}];
						uni.showLoading({
							title: '正在上传'
						});
						var dir = '/static/img/validate_item_video/';
						cos.uploadFiles(list, dir, (data) => {
							uni.hideLoading();
							data.files.forEach(item => {
								that.form.list.push({
									validate_item_name: '验车图片',
									validate_item_id: 10,
									validate_item_pic: item.options.Key,
									validate_result: 1,
									validate_value: '',
									validate_object: that.object
								})
							})
							console.log(that.form);
						});
					}
				})
			},
			showImg(list, idx) {
				console.log(list);
				uni.previewImage({
					urls: list,
					current: idx
				})
			},
			submit() {
				var that = this;
				var form = this.form;
				form.order_id = this.orders_id;
				form.list.find((item) => item.validate_item_id == 8).validate_value = this.value;
				form.list = form.list.filter(item => item.validate_item_pic || item.validate_item_id == 8);
				form.list.push(this.validate_result);
				form.list.push(this.car_need_repair);
				form.list=form.list.map(item=>{
					item.validate_object=that.object
					return item;
				});
				that.$http.post('/orders/chucheyanche', form, (res) => {
					if (res.data.success) {
						that.$refs.uToast.show({
							title: '提交成功',
							type: "success"
						});
						uni.$emit("getOrdersInfo", that.data);
						uni.navigateBack();
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},

			onListChange(list, name) {
				var that = this;
				var dir = '/static/img/validate_item_pic/';
				cos.uploadFiles(list, dir, (data) => {
					that.form.list.find((item) => item.validate_item_id == name).validate_item_pic = data.files[0]
						.options.Key;
					console.log(that.form);
				});
			},
			onPictureChange(list, name) {
				uni.showLoading({
					title: '正在上传'
				});
				var that = this;
				var dir = '/static/img/validate_item_pic/';
				cos.uploadFiles(list, dir, (data) => {
					uni.hideLoading();
					data.files.forEach(item => {
						that.form.list.push({
							validate_item_name: '验车图片',
							validate_item_id: 9,
							validate_item_pic: item.options.Key,
							validate_result: 1,
							validate_value: '',
							validate_object: that.object,
							order_id: that.orders_id
						})
					})
					console.log(that.form);
				});
			}
		}
	}
</script>

<style>

</style>